<template>
  <!--单例模式，name相同则复用一个无界实例，改变url则子应用重新渲染实例到对应路由 -->
  <WujieVue width="100%" height="100%" name="other" :url="otherUrlUrl"
            :sync="true" :props="{jump}"
            :beforeLoad="beforeLoad" :loadError="loadError"
            :beforeMount="beforeMount" :afterMount="afterMount"
            :beforeUnmount="beforeUnmount" :afterUnmount="afterUnmount"
            :activated="activated" :deactivated="deactivated"></WujieVue>
</template>

<script>
import hostMap from "../hostMap";
import wujieVue from "wujie-vue2";

export default {
  name: "OtherSub",
  computed: {
    otherUrlUrl() {
      return hostMap("//localhost:10050/wujie-test/microapp-other/") + `#/${this.$route.params.path}`;
    }
  },
  watch: {
    "$route.params.path": {
      handler: function () {
        // 主应用主动告知子应用路由跳转
        wujieVue.bus.$emit("other-router-change", `/${this.$route.params.path}`);
      },
      immediate: true,
    },
  },
  methods: {
    jump(name) {
      this.$router.push({name});
    },
    // 子应用开始加载静态资源前触发
    beforeLoad: (appWindow) => console.log(`${appWindow.__WUJIE.id} beforeLoad 生命周期`),
    // 子应用渲染（调用window.__WUJIE_MOUNT）前触发
    beforeMount: (appWindow) => console.log(`${appWindow.__WUJIE.id} beforeMount 生命周期`),
    // 子应用渲染（调用window.__WUJIE_MOUNT）后触发
    afterMount: (appWindow) => console.log(`${appWindow.__WUJIE.id} afterMount 生命周期`),
    // 子应用卸载（调用window.__WUJIE_UNMOUNT）前触发
    beforeUnmount: (appWindow) => console.log(`${appWindow.__WUJIE.id} beforeUnmount 生命周期`),
    // 子应用卸载（调用window.__WUJIE_UNMOUNT）后触发
    afterUnmount: (appWindow) => console.log(`${appWindow.__WUJIE.id} afterUnmount 生命周期`),
    // 子应用保活模式下，进入时触发
    activated: (appWindow) => console.log(`${appWindow.__WUJIE.id} activated 生命周期`),
    // 子应用保活模式下，离开时触发
    deactivated: (appWindow) => console.log(`${appWindow.__WUJIE.id} deactivated 生命周期`),
    // 子应用加载资源失败后触发
    loadError: (url, e) => console.log(`${url} 加载失败`, e),
  },
}
</script>

<style scoped>

</style>
